<template>
  <div>
    <div class="label-container">
      <el-tag class="func-item" v-for="(item, index) in dataArray" :key="index" size="large" :effect="randomEffect(index)"
        :type="randomType(index)" @click="experience(item)">
        {{ item.name }}
      </el-tag>
    </div>

    <div style="margin: 25px;">
      <el-card>
        <div style="padding: 10px;">
          <component :is="currentView"></component>
        </div>
      </el-card>
    </div>

    <!-- <component :is="currentView"></component> -->
  </div>
</template>

<script>
import FloatingButton from './components/styleDemos/FloatingButton.vue'
import VerticalScroll from './components/styleDemos/VerticalScroll.vue'
import AnalysisYsData from './components/javascriptDemos/AnalysisYsData.vue'
import RollingAdsorption from './components/styleDemos/RollingAdsorption.vue'
import HtmlToImage from './components/javascriptDemos/HtmlToImage.vue'

export default {
  name: 'App',
  data() {
    return {
      types: ["", "success", "info", "warning", "danger"],
      effects: ["dark", "light", "plain"],
      currentView: HtmlToImage,
      dataArray: [
        { name: '悬浮功能按钮', view: FloatingButton },
        { name: '垂直滚动标签', view: VerticalScroll },
        { name: 'excel数据分析', view: AnalysisYsData },
        { name: '滚动吸附', view: RollingAdsorption },
        { name: 'Html转图片', view: HtmlToImage },


      ]
    }
  },
  methods: {
    experience(obj) {
      this.currentView = obj.view;
    },
    randomType(index) {
      return this.types[index % 4];
    },
    randomEffect(index) {
      return this.effects[index % 3];
    },
  },
}
</script>

<style scoped>
.label-container {
  margin: 15px;
}

.func-item {
  margin: 0 15px;
  padding: 0 15px;
  cursor: pointer;
}

.func-item span {
  cursor: pointer;
  margin: 5px 20px 5px 0;
}
</style>
<style>
body {
  padding: 0;
  margin: 0;
}
</style>